<template>
  <div class="personal">
    <a-card title="" style="width: 100%">
      <div class="personal_top">
        <p>个人榜单</p>
        <a-button type="primary">
          禁榜申诉
        </a-button>
      </div>
      <div class="basicdata">
        <div class="data_box">
          <p>在线商品数</p>
          <em>{{ data.count }}</em>
        </div>
        <div class="data_box">
          <p>今日销量</p>
          <em>{{ data.goods_today_xl }}</em>
        </div>
        <div class="data_box">
          <p>商品平均销量</p>
          <em>{{ data.goods_avg_num }}</em>
        </div>
        <div class="data_box">
          <p>总领券量</p>
          <em>{{ data.lj_num }}</em>
        </div>
        <div class="data_box">
          <p>发布商品总数</p>
          <em>{{ data.all_num }}</em>
        </div>
        <div class="data_box">
          <p>入驻时间</p>
          <em>{{ data.create_at }}</em>
        </div>
      </div>
      <div class="statorder_top">
        <a-radio-group
          default-value="1"
          button-style="solid"
          v-model="type"
          @change="typeChange(type)"
          style="margin-right:10px">
          <a-radio-button value="1">
            今日销量
          </a-radio-button>
          <a-radio-button value="2">
            今日领券量
          </a-radio-button>
        </a-radio-group>
        <a-range-picker
          :ranges="{ 今日: [moment(), moment()], 本月: [moment(), moment().endOf('month')] }"
          show-time
          format="YYYY/MM/DD"
          @change="onChange"
        />
        <div>
          <!-- <a-radio-group
            default-value="1"
            button-style="solid"
            v-model="searchradio"
            @change="searchChange(searchradio)"
            style="margin-right:10px">
            <a-radio-button value="1">
              ID
            </a-radio-button>
            <a-radio-button value="2">
              名称
            </a-radio-button>
          </a-radio-group> -->
          <a-input-search placeholder="请输入查询内容" style="width: 250px" v-model="searchipt" @search="onSearch" />
        </div>
      </div>
      <div>
        <div class="goods_bot">
          <a-row type="flex" justify="start">
            <a-col class="hover_box2" v-for="(item, index) in botList" :key="index" :span="4">
              <!-- top标签 -->
              <div class="position_Box">
                <div class="top_num">{{ index +1 }}</div>
              </div>
              <a-card hoverable :body-style="{ padding:0 }">
                <div class="top_main2" @click="godetails(item.id)">
                  <img
                    slot="cover"
                    :src="item.goods_img"
                    alt=""
                    class="elimg2"
                    style="cursor: pointer;width:220px;height:220px">
                  <div class="top_right2">
                    <div class="top_title2">
                      {{ item.goods_short_name }}
                    </div>

                    <div class="top_roll2" v-if="type==1">
                      今日销量<span style="color:red;font-weight:bold">{{
                        item.today_coupon_num
                      }}</span>
                      件
                    </div>
                    <div class="top_roll2" v-if="type==2">
                      今日领劵<span style="color:red;font-weight:bold">{{
                        item.count
                      }}</span>
                      次
                    </div>

                    <div class="top_data2">
                      <div>
                        <p>{{ item.goods_after_price }}</p>
                        <p>卷后价</p>
                      </div>
                      <div>
                        <p>{{ item.commission_bl }}%</p>
                        <p>佣金比例</p>
                      </div>
                    </div>
                    <div class="coupon_Box">
                      <span style="margin-right:7px">
                        <span>劵</span>
                        <em style="color:red">¥ {{ parseInt(item.coupon_discount) }}</em>
                      </span>
                      <span>
                        月销：<span style="color:red">{{
                          item.today_coupon_num
                        }}</span>
                        日销：<span style="color:red">{{
                          item.today_coupon_num
                        }}</span>
                      </span>
                    </div>
                    <a-progress
                      style="width:200px;margin: 0 auto;"
                      :percent="parseInt(
                        (
                          (item.count / item.coupon_all_num) *
                          100
                        ).toFixed(2)
                      )"
                      size="small"
                      status="active" />
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
        <div style="width:100%;text-align:center">
          <a-pagination
            :current="current"
            :total="total"
            :show-total="total => `共 ${total} 条`"
            :page-size="50"
            :default-current="1"
            @change="pagChange" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
  import {
    getTopList,
    getTopGoods
  } from '@/api/stat'
  import moment from 'moment'
  export default {
    name: 'Personal',
    data () {
      return {
        moment,
        current: 1,
        total: 0,
        data: {
          count: 0, // 在线商品数
          goods_today_xl: 0, // 今日销量
          goods_avg_num: 0, // 商品平均销量
          lj_num: 0, // 总领券量
          all_num: 0, // 发布商品总数
          create_at: '' // 入驻时间
        },
        type: '1',
        searchipt: '',
        searchradio: '1',
        goodsid: '',
        search: '',
        botList: [
          //     {
          //   id: 18, // 商品表自增id
          //   item_id: '48200997426', // 京东id
          //   goods_img: 'https://img.alicdn.com/imgextra/i2/2165985268/O1CN01SKpnk21omn45RN9JX_!!2165985268.jpg', // 商品图片
          //   goods_short_name: '11', // 商品短名称
          //   goods_today_xl: 0, // 今日2小时销量
          //   today_coupon_num: 0, // 今日销量
          //   count: 9, // 领卷数量
          //   goods_after_price: '10.00', // 商品卷后单价
          //   commission_bl: '20', // 佣金比例
          //   coupon_discount: '20', // 优惠卷面值
          //   month_goods_num: 1249 // 商品月销量
          // }
        ],
        start: '',
        end: ''
      }
    },

    computed: {

    },
    created () {
      this.getTopList()
      this.getTopGoods(1)
    },
    mounted () {

    },
    methods: {
      godetails (id) {
      // console.log(id)
      const routes = this.$router.resolve({
        path: '/jdselectgoods/goodsdetails',
        query: {
          id: id
        }
      })
      window.open(routes.href, '_blank')
    },
    onChange (dates, dateStrings) {
    //   console.log('From: ', dates[0], ', to: ', dates[1])
    //   console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      if (dateStrings[0] !== '' && dateStrings[1] !== '') {
        this.start = moment(dateStrings[0]).format('X')
        this.end = moment(dateStrings[1]).format('X')
        // console.log(this.start, this.end)
      } else {
        this.start = ''
        this.end = ''
      }
      this.getTopGoods(this.type, this.searchipt, this.start, this.end, this.current)
    },
      pagChange (current) {
        this.current = current
        this.getTopGoods(this.type, this.searchipt, this.start, this.end, this.current)
      },
      onSearch (val) {
        console.log(val)
          this.getTopGoods(this.type, this.searchipt)
      },
      searchChange (val) {
        console.log(val)
        this.searchipt = ''
        this.goodsid = ''
        this.search = ''
        if (val === '1') {
          this.goodsid = this.searchipt
        } else {
          this.search = this.searchipt
        }
      },
      typeChange (val) {
        console.log(val)
         this.getTopGoods(this.type, this.searchipt, this.current)
      },
      // 上单用户榜单商品接口
      getTopGoods (type, search, start, end, page) {
        getTopGoods({
            type: type,
            search: search,
            start: start,
            end: end,
            page: this.current,
            pagesize: 50
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('榜单商品', res)
              this.botList = res.data.data
              this.total = res.data.count
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 获取个人榜单数据
      getTopList () {
        getTopList()
          .then(res => {
            if (res.code === 200) {
              console.log('个人榜单数据', res)
              this.data = res.data
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }

    }
  }
</script>

<style lang='less' scoped>
  .personal {
    .personal_top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        font-size: 26px;
        color: rgba(51, 60, 72, 1);
        padding: 15px 0 0;
      }
    }

    .basicdata {
      width: 60%;
      margin: 0 0 40px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 10px;

      .data_box {
        p {
          font-size: 14px;
          color: rgba(127, 142, 164, 1);
          line-height: 18px;
          margin-bottom: 15px;
        }

        em {
          font-size: 20px;
          font-family: Arial;
          font-weight: 700;
          color: rgba(51, 60, 72, 1);
          line-height: 18px;
        }
      }
    }

    .statorder_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding: 10px 0;
      height: 50px;
      background: rgba(239, 243, 245, 1);
      box-sizing: border-box;
      padding: 0 15px;
    }

    .goods_bot {
      position: relative;
      padding: 15px;

      .hover_box2 {
        position: relative;
        width: 243px;
        border-radius: 12px;
        margin-bottom: 20px;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;

        .topimg2 {
          position: absolute;
          top: -8px;
          left: 20px;
          z-index: 2;
        }

        .top_num2 {
          position: absolute;
          top: 18px;
          left: 43px;
          font-size: 23px;
          color: #ffffff;
          z-index: 3;
        }

        // .elimg2 {
        //   width: 220px;
        //   // height: 220px;
        // }
        .top_main2 {
          background-color: #fff;

          // height: 220px;
          // display: flex;
          // justify-content: space-around;
          // align-items: center;
          .top_right2 {
            padding-top: 10px;
            // width: 220px;
            font-size: 13px;
            margin: 0 auto;
            padding-bottom: 20px;

            .top_title2 {
              width: 200px;
              //   height: 33px;
              margin: 3px auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-top: 8px;
              padding-bottom: 8px;
              font-size: 16px;

              a {
                color: #000;
                // font-size: 14px;
                text-decoration: none;
              }

              a:hover {
                color: blue;
              }
            }

            .top_roll2 {
              padding-top: 8px;
              padding-bottom: 8px;
              width: 150px;
              // height: 25px;
              line-height: 25px;
              border-radius: 8px;
              margin: 0 auto;
              background-color: rgba(148, 144, 144, 0.1);

              span {
                font-size: 16px;
                margin-left: 5px;
                margin-right: 5px;
                color: #ff4215;
                font-weight: bold;
              }
            }

            .top_data2 {
              height: 70px;
              font-size: 13px;
              display: flex;
              justify-content: space-around;
              align-items: center;

              p {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
              }

              p:first-child {
                color: #333;
                font-size: 16px;
                font-weight: bold;
              }
            }
          }
        }
      }
    }

    .position_Box {
      position: relative;
      z-index: 2;

      .top_num {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 32px;
        height: 28px;
        background: #F2F7FF;
        border-radius: 0 0 5px;
        color: #3286FF;
        line-height: 28px;
        font-size: 14px;
        z-index: 3;
        text-align: center;
      }
    }

    .disflex {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 10px;
      text-align: left;

      .childone {
        display: inline-block;
        width: 150px !important;
      }

      .childtwo {
        text-align: right;
        white-space: nowrap;
      }
    }
  }
</style>
